import React, { Component } from 'react';

// 为什么? 数据请求一般componentDidMounted 中
// 因为 constructor 一般进行初始化操作, 而数据请求不是初始化操作.
// 因为constructor 最早的一个生命周期函数,如果报错,后面最基本的页面显示 render 不会执行,
// render 中一般进行页面渲染, 当state 中的数据改变时就会render, 而数据请求一般都会伴随着修改state, 从而
// 再一次触发render, 所以该生命周期也不合适.
class Father extends Component {
    constructor() {
        super()
        // 01: 进行state 初始化赋值
        // 02: 践行函数的实例this 绑定
        // 03: 可以不用写

        this.state = {
            userinfo: {
                name: '张三',
                age: 20
            }
        }
    }
    render() {
        // 01:所有生命周期中,唯一一个必须写的生命周期
        // 02: 该生命周期一般执行渲染操作
        return <div>
            我是父组件
            <p onClick={this.addAge}>{this.state.userinfo.name}==={this.state.userinfo.age}</p>
        </div>
    };

    addAge = () => {
        this.setState((state) => ({
            userinfo: {
                ...state.userinfo, // es7新语法 展开运算符
                age: state.userinfo.age + 1
            }
        }))
    }
    timer = null;
    componentDidMount() {
        // 01: 当组件的dom 挂载到dom 树上后,执行的生命周期函数
        // 02: 一般在此处进行数据请求 vue中 created mounted setup 
        // 03: 可以获取更新后的dom 节点

        this.timer = setInterval(() => {
            console.log('我是定时器');
        }, 1000)

        // 给页面绑定事件
        document.onclick = function () {
            console.log('document');
        }

    };
    componentDidUpdate() {
        // 01: 初始化不执行,当state中的数据更新时触发
        console.log('componentDidUpdate');
    };
    componentWillUnmount() {
        // 组件卸载前执行的生命周期函数
        // 一般用来清理副作用  定时器, 事件 , 取消网络请求了
        clearInterval(this.timer)
        console.log('componentWillUnmount');
        document.onclick = null
    }
}

export default Father;
